<script setup lang="ts">
import employeesDialog from "./employeesDialog.vue";
import orgItem from "./orgItem.vue";
import { ref, computed, onMounted } from "vue";
// import {deepCopy} from "../../utils/objutil";
onMounted(() => {
  radioAllCheck.value = props.radioAll;
});
let radioAllCheck = ref();
let selectUserDialogVisible = ref(false);
const afterSelectUser = (data) => {
  //选择人员变化
  selectUserDialogVisible.value = false;
  emits("update:orgList", data);
};

var defaultValue = computed({
  get: () => {
    let orgList = props.orgList;
    return orgList;
  },
  set: (r) => {
    emits("update:orgList", r);
  },
});
let emits = defineEmits(["update:orgList"]);

let props = defineProps({
  // 这里是父组件给的值
  disableSelectChildrenDept: {
    //禁止选择下级部门
    type: Boolean,
    default: true,
  },
  // 这个是数据类型 为数组
  orgList: {
    type: Array,
    default: () => [],
  },
  // 禁止选择人的开关
  disableUser: {
    type: Array,
    default: () => [],
  },
  // 类型
  type: {
    type: String,
    default: "org",
  },
  // 是否可以多选
  multiple: {
    type: Boolean,
    default: true,
  },
  // 禁止选择
  disabled: {
    type: Boolean,
    default: false,
  },
  // 控制 展示的样式
  showStyle: {
    type: Number,
    default: 1,
  },
  // 默认值
  placeholder: {
    type: String,
    default: "请选择",
  },
  // 是否展示那个tag
  showTag: {
    type: Boolean,
    default: true,
  },
  // 是否默认展示为单选全员
  radioAll: {
    type: String,
    default: "true",
  },
});
// 绑定的数据 回调
const inputShowValue = computed(() => {
  if (!defaultValue.value) {
    return "";
  }
  return defaultValue.value.map((re) => re.name).join(",");
});
const changeAll = () => {
  defaultValue.value = [];
  radioAllCheck.value = "true";
};
const changeOne = () => {
  radioAllCheck.value = "false";
  selectUserDialogVisible.value = true;
};
const radioShowValue = computed(() => {
  // 没选 就返还空
  if (!defaultValue.value) {
    return "";
  }
  // 定义数据
  let deptNumber = 0;
  let userNumber = 0;
  let returnContent = "";
  // 判断有几个部门 有几个人
  defaultValue.value.forEach((item) => {
    if (item.type == "dept") {
      deptNumber++;
    }
    if (item.type == "user") {
      userNumber++;
    }
  });
  if (deptNumber) {
    returnContent += deptNumber + "部门，";
  }
  if (userNumber) {
    returnContent += userNumber + "人";
  }
  // 返还 几个部门几个人
  return returnContent + "" + "添加";
});
const selectShowValue = computed(() => {
  if (!defaultValue.value) {
    return [];
  }

  return defaultValue.value.filter((re) => re.name);
});
</script>

<template>
  <div>
    <employees-dialog
      v-model:visible="selectUserDialogVisible"
      :data="defaultValue"
      :type="type"
      :disable-select-children-dept="disableSelectChildrenDept"
      :multiple="multiple"
      :disable-user="disableUser"
      @change="afterSelectUser"
    />
  </div>
  <template v-if="showStyle === 1">
    <el-button
      :type="disabled ? 'info' : 'primary'"
      :disabled="disabled"
      :icon="$icon['Plus']"
      circle
      size="large"
      @click="selectUserDialogVisible = true"
    >
    </el-button>
    <div style="width: 100%; margin-top: 10px; text-align: left">
      <org-item v-model:data="defaultValue" :disabled="disabled" />
    </div>
  </template>
  <template v-if="showStyle === 2">
    <el-input
      v-model="inputShowValue"
      :placeholder="placeholder"
      clearable
      readonly
      :disabled="disabled"
      style="width: 200px"
      @click="selectUserDialogVisible = true"
    />
  </template>
  <template v-if="showStyle === 3">
    <div @click="selectUserDialogVisible = true" class="selcet">
      <p class="pText" v-if="defaultValue.length == 0">
        {{ props.placeholder }}
      </p>
      <div
        v-if="defaultValue.length !== 0"
        style="width: 100%; text-align: left"
      >
        <org-item v-model:data="defaultValue" :disabled="disabled" />
      </div>
      <el-icon v-if="defaultValue.length == 0" class="icon"
        ><ArrowDown
      /></el-icon>
    </div>
  </template>
  <!-- 要什么就在这加判断条件  这个是他封装好的组件 ，要写什么就在这加 用showStyle判断就可以-->
  <template v-if="showStyle === 4">
    <!-- 这里要判断 全员 是什么东西 我不知道  -->
    <el-radio-group v-model="radioAllCheck">
      <el-radio @change="changeAll" value="true">全部员工</el-radio>
      <el-radio @change="changeOne" value="false">部分员工</el-radio>
    </el-radio-group>
    <el-input
      v-if="defaultValue.length !== 0"
      v-model="radioShowValue"
      :placeholder="placeholder"
      clearable
      readonly
      :disabled="disabled"
      style="width: 200px"
      @click="selectUserDialogVisible = true"
    />
  </template>
</template>

<style scoped lang="less">
.selcet {
  min-width: 120px;
  max-height: 34px;
  border: 1px solid #d8ebff;
  border-radius: 5px 5px;
  padding: 0 10px 0 10px;
  position: relative;
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin-left: 20px;
}
.icon {
  position: absolute;
  top: 30%;
  right: 5px;
}
.pText {
  width: 100px;
  line-height: 10px;
}
</style>
